<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    /* 
        简易轮播:
            1. 点击切换
            2. 自动切换  => 每间隔3s切换到下一张 (下标切换,临界值处理)
            3. 移入暂停, 移出移动

        动态生成小广告:
            <div class="adver">
                <div class="adver-header">
                    <div class="adver-title">距离广告关闭还有10秒</div>
                    <div class="adver-close">X</div>
                </div>
                <div class="adver-main">
                    <img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
                </div>
            </div> 
            通过 document.createElement("div") 动态创建

            var adver = document.createElement("div");
            adver.setAttribute("class","adver")
            body.appendChild(adver);
    
    */

    var box = document.querySelector(".box");

    // onmouseover 鼠标移入元素时触发
    box.onmouseover = function(){
        console.log("鼠标划入");
        box.style.backgroundColor = "red";
    }
    
    // onmouseover 鼠标移出元素时触发
    box.onmouseout = function(){
        console.log("鼠标移出");
        box.style.backgroundColor = "aquamarine";
    }

</script>
</html>